<template>
  <contentLayout use-fresh v-model:fresh-loading="freshLoading" @fresh-load="freshLoad">
    <div class="home_box">
      <div class="header">
        <BaseSearch placeholder="项目名称、疾病、适应症"></BaseSearch>
      </div>

      <div class="enter_box">
        <div class="enter_box_item" style="margin-right: 16px">
          <img src="@/assets/images/home_bm.png" />
          <div class="tip1">我要报名</div>
          <div class="tip2">快捷报名入口</div>
        </div>
        <div class="enter_box_item" @click="toProject">
          <img src="@/assets/images/home_zm.png" />
          <div class="tip1">招募项目</div>
          <div class="tip2">与平台合作项目</div>
        </div>
      </div>

      <div class="pro_box">
        <RouterLink to="/project">
          <van-cell title="推荐项目" is-link class="pro_cell_head" value="更多" bind:click="toList" />
        </RouterLink>
        <template v-if="listData.length">
          <ProjectItem
            v-for="item in listData"
            :key="item.id"
            :pro-data="item"
            :file-list="fileList"
            style="margin-bottom: 16px"
          ></ProjectItem>
        </template>
        <van-empty class="empty" v-else></van-empty>
      </div>
    </div>
  </contentLayout>
</template>

<script setup lang="ts" name="Home">
import contentLayout from "@/layouts/contentLayout/index.vue";
import { getProjectList } from "@/apis/product";

const router = useRouter();
const freshLoading = ref(false);

const fileList = reactive([
  { label: "适应症", fileId: "indication" },
  { label: "疾病", fileId: "diseases" },
  { label: "机构名称", fileId: "organizationName" },
  { label: "主要研究者", fileId: "mainPi" },
  { label: "开展区域", fileId: "area" }
]);
const listData = ref<any[]>([]);

function initData() {
  getList();
}

async function getList() {
  try {
    const data = await getProjectList({ pageNum: 1, pageSize: 3 });
    listData.value = data.data.list;
    freshLoading.value = false;
    Promise.resolve(data);
  } catch (error) {
    freshLoading.value = false;
    Promise.reject(error);
  }
}

const toProject = () => {
  router.push("/project");
};

const freshLoad = () => {
  getList();
};

initData();
</script>

<style lang="scss" scoped>
.home_box {
  background-color: #fff;

  .header {
    position: relative;
    height: 188px;
    margin-bottom: 12px;
    background: url("@/assets/images/home_banner.png") no-repeat center center;
    background-size: cover;
  }

  .enter_box {
    display: flex;
    padding: 0 16px;
    margin-bottom: 10px;

    .enter_box_item {
      position: relative;
      height: 88px;
      flex: 1;
      padding-left: 12px;

      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        // background-color: #f2f3f5;
      }

      .tip1 {
        position: relative;
        margin-top: 15px;
        font-size: 16px;
        font-weight: bold;
        color: #000;
      }

      .tip2 {
        position: relative;
        margin-top: 7px;
        font-size: 12px;
        color: var(--color-grep-3);
      }
    }
  }

  .pro_box {
    padding: 12px 16px;
    background: linear-gradient(179deg, #f0f5ff 0%, #fff 100%);
    border-radius: 20px 20px 0 0;

    .pro_cell_head {
      &.van-cell {
        padding: 0 0 15px 5px;
        font-size: 16px;
        background-color: rgba($color: #fff, $alpha: 0%);

        &::after {
          border: none;
        }

        .van-cell__title {
          font-size: 16px;
          font-weight: bold;
          color: var(--color-grep);
        }
      }
    }

    .empty {
      .van-empty {
        padding: 0;
      }
    }
  }
}
</style>
@/apis/product
